<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Pipeline Bootstrap 4.0 Theme</title>
    <!-- load stylesheets -->
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400">   <!-- Google web font "Open Sans", https://fonts.google.com/ -->
    <link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css">           <!-- Font Awesome, http://fontawesome.io/ -->
    <link rel="stylesheet" href="css/bootstrap.min.css">                                 <!-- Bootstrap style, http://v4-alpha.getbootstrap.com/ -->
    <link rel="stylesheet" href="css/magnific-popup.css">                                <!-- Magnific pop up style, http://dimsemenov.com/plugins/magnific-popup/ -->
    <link rel="stylesheet" href="css/templatemo-style.css">                              <!-- Templatemo style -->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
          <![endif]-->
      </head>

      <body>
        <div class="container-fluid">

            <section id="welcome" class="tm-content-box tm-banner margin-b-10">
                <div class="tm-banner-inner">
                    <h1 class="tm-banner-title">城市</h1>                        
                </div>                    
            </section>

            <div class="tm-body">
                <div class="tm-sidebar">
                    <nav class="tm-main-nav">
                        <ul class="tm-main-nav-ul">
                            <li class="tm-nav-item"><a href="#welcome" class="tm-nav-item-link tm-button">
                                <i class="fa fa-smile-o tm-nav-fa"></i>主页</a>
                            </li>
                            <li class="tm-nav-item"><a href="#gallery" class="tm-nav-item-link tm-button">
                                <i class="fa fa-image tm-nav-fa"></i>图片</a>
                            </li>
                            <li class="tm-nav-item"><a href="#services" class="tm-nav-item-link tm-button">
                                <i class="fa fa-tasks tm-nav-fa"></i>城市记忆</a>
                            </li>
                            <li class="tm-nav-item"><a href="#about" class="tm-nav-item-link tm-button">
                                <i class="fa fa-sitemap tm-nav-fa"></i>关于城市</a>
                            </li>
                            <li class="tm-nav-item"><a href="#contact" class="tm-nav-item-link tm-button">
                                <i class="fa fa-envelope-o tm-nav-fa"></i>联系我们</a>
                            </li>
                        </ul>
                    </nav>
                </div>
                
                <div class="tm-main-content">
                    
                    <div class="tm-content-box tm-content-box-home">                        
                        <img src="img/1200x800-01.jpg" alt="Image 1" class="img-fluid tm-welcome-img">                        
                        <div class="tm-welcome-boxes-container">
                            <div class="tm-welcome-box">
                                <div class="tm-welcome-text">
                                    <h2 class="tm-section-title">城市定义</h2>
                                    <p>城市,是"城"与"市"的组合词."城"主要是为了防卫,并且用城墙等围起来的地域."市"则是指进行交易的场所.</p>    
                                </div>                            
                                <a href="#" class="tm-welcome-link tm-button">City Definition</a>
                            </div>
                            <div class="tm-welcome-box">
                                <div class="tm-welcome-text">
                                    <h2 class="tm-section-title">城市扩展</h2>
                                    <p>城市也叫城市聚落,是以非农业产业和非农业人口集聚形成的较大居名点.城市的行政管辖功能可能涉及较本身更广泛的区域.</p>    
                                </div>                            
                                <a href="#" class="tm-welcome-link tm-button">City Extend</a>
                            </div>
                        </div>
                    </div>
                    <div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >企业网站模板</a></div>
                        
                    <div id="gallery" class="tm-content-box">                        
                        <div class="grid tm-gallery">
                            <figure class="effect-bubba">
                                <img src="img/img-11-08.jpg" alt="Image 8" class="img-fluid">
                                <figcaption>
                                    <h2> City <span>impression</span></h2>
                                    <p>The first feeling of the city</p>
                                    <a href="img/img-11-08.jpg">View more</a>
                                </figcaption>
                            </figure>

                            <figure class="effect-bubba">
                                <img src="img/img-11-07.jpg" alt="Image 7" class="img-fluid">
                                <figcaption>
                                    <h2>City <span>Opinion</span></h2>
                                    <p>Feel good about a city</p>
                                    <a href="img/img-11-07.jpg">View more</a>
                                </figcaption>
                            </figure>

                            <figure class="effect-bubba">
                                <img src="img/img-11-05.jpg" alt="Image 5" class="img-fluid">
                                <figcaption>
                                    <h2>City <span>Roam</span></h2>
                                    <p>Where will you go to the city</p>
                                    <a href="img/img-11-05.jpg">View more</a>
                                </figcaption>
                            </figure>

                            <figure class="effect-bubba">
                                <img src="img/img-11-03.jpg" alt="Image 3" class="img-fluid">
                                <figcaption>
                                    <h2>City <span>Food</span></h2>
                                    <p>Food is essential for a city</p>
                                    <a href="img/img-11-03.jpg">View more</a>
                                </figcaption>
                            </figure>

                            <figure class="effect-bubba">
                                <img src="img/img-11-02.jpg" alt="Image 2" class="img-fluid">
                                <figcaption>
                                    <h2>City <span>Build</span></h2>
                                    <p>Architecture is an indispensable component of a city</p>
                                    <a href="img/img-11-02.jpg">View more</a>
                                </figcaption>
                            </figure>

                            <figure class="effect-bubba">
                                <img src="img/img-11-04.jpg" alt="Image 4" class="img-fluid">
                                <figcaption>
                                    <h2>City <span>History</span></h2>
                                    <p>A city has its development history</p>
                                    <a href="img/img-11-04.jpg">View more</a>
                                </figcaption>
                            </figure>                                
                        </div>
                    </div>

                    <div id="services" class="tm-content-box tm-gray-bg tm-services">

                        <div class="tm-services-img-container">
                            <img src="img/450x900-01.jpg" alt="Green Field" class="img-fluid tm-services-img">    
                        </div> 
                            
                        <div class="tm-box-pad tm-services-description-container">
                            <h2 class="tm-section-title">城市记忆</h2>
                            <p class="tm-section-description">繁华的都市，绚丽的霓虹灯，喧嚣的大街。这可能是很多人对于城市的初印象。</p>
                        <p class="tm-section-description">其实，城市对于我来说更多的是向往，在那里，你会有很多发展的空间。它就像是一个法师一样，能把人吸引过去。在城市里，过着不同的人生，每天见到很多素不相识的人，看不同的事物，每天都能增加自己的视野 ，久而久之，你会发现，这里已经留下了你活动的印记</p> 
                            <p class="tm-section-description">城市是梦想实现的天堂，在这里，许许多多努力的人在为自己的梦想努力奋斗，成功的背后，是多少辛苦的付出。回过头来看一眼奋斗过的城市，才发觉，原来城市的某个角落，是那么的熟悉。</p>   
                        </div>                                              
                        
                    </div>

                    <!-- slider -->
                    <div id="about" class="tm-content-box">
                        <div class="tm-box-pad tm-bordered-box">
                            <h2 class="tm-section-title">关于城市,你有怎样的理解?</h2>
                            <p>城市是具有相当面积、经济活动和住户集中，以致在私人企业和公共部门产生规模经济的连片地理区域。在有限空间地区内各种经济市场相互交织在一起的网络系统。城市显示了相互作用的方式，人与人之间是紧密联系在一起的。</p>
                            <a href="#" class="tm-button tm-button-normal">阅读更多</a>
                        </div>
                        <div class="tm-flex">
                            <div class="tm-purple-bg tm-box-pad tm-bordered-box tm-no-border-top">
                                <h2 class="tm-section-title">城市的形成</h2>
                                <p>城市的出现，是人类走向成熟和文明的标志，也是人类群居生活的高级形式。城市的起源从根本上来说，有因"城"而"市"和因"市"而"城"两张类型，因"城"而"市"就是城市的形成先有城后有市，市是在城的基础上发展起来的。而因"市"而"城"即是先有市场后有城市。</p>
                            </div>
                            <div class="tm-gray-bg tm-box-pad tm-bordered-box tm-no-border-top">
                                <h2 class="tm-section-title">城市发展</h2>
                                <p>城市产生与发展的基本动力是社会生产力的发展。学者普遍认为，真正意义上的城市是工商业发展的产物。</p>
                            </div>    
                        </div>                        
                    </div>

                    <section id="contact" class="tm-content-box">

                        <div class="tm-flex">
                            <div class="tm-contact-left-half tm-gray-bg">
                                <div class="tm-contact-inner-pad">
                                    <h2 class="tm-section-title">联系方式</h2>
                                    <form action="#contact" method="post" class="contact-form">

                                        <div class="form-group">
                                            <input type="text" id="contact_name" name="contact_name" class="form-control" placeholder="名字"  required/>
                                        </div>
                                        <div class="form-group">
                                            <input type="email" id="contact_email" name="contact_email" class="form-control" placeholder="电子邮箱"  required/>
                                        </div>
                                        <div class="form-group">
                                            <textarea id="contact_message" name="contact_message" class="form-control" rows="9" placeholder="意见/建议" required></textarea>
                                        </div>
                                        
                                        <button type="submit" class="btn btn-primary pull-xs-right tm-button tm-button-normal">完成</button>

                                    </form>
                                </div>                                
                            </div>

                            <div class="tm-contact-right-half tm-purple-bg">
                                <div class="tm-address-box">
                                    <h2 class="tm-section-title">关于我们</h2>
                                    <address>这是一个热衷不定期更新日常的网站,<br>
                                             如果你有什么意见或是好的建议<br>
                                             随时欢迎你的"到来"
                                    </address>    
                                </div>                                
                                <div id="">call</div>
                            </div>
                        </div>
                        
                    </section>  

                    <footer class="tm-footer">
                        <p class="text-xs-center">Copyright &copy; 2019 Your Company </p>
                    </footer>

                </div>
            </div>             
        </div>
        
        <!-- load JS files -->
        
        <script src="js/jquery-1.11.3.min.js"></script>             <!-- jQuery (https://jquery.com/download/) -->
        <script src="js/tether.min.js"></script> <!-- Tether for Bootstrap (http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h) -->
        <script src="js/jquery.magnific-popup.min.js"></script>     <!-- Magnific pop-up (http://dimsemenov.com/plugins/magnific-popup/) -->
        <script src="js/jquery.singlePageNav.min.js"></script>      <!-- Single Page Nav (https://github.com/ChrisWojcik/single-page-nav) -->
        
        <!-- Templatemo scripts -->
        <script>  

        

        function setNavbar() {
            if ($(document).scrollTop() > 160) {
                $('.tm-sidebar').addClass('sticky');
            } else {
                $('.tm-sidebar').removeClass('sticky');
            }
        }                   
    
        $(document).ready(function(){
            
            // Single page nav
            $('.tm-main-nav').singlePageNav({
                'currentClass' : "active",
                offset : 20
            });

            // Detect window scroll and change navbar
            setNavbar();
            
            $(window).scroll(function() {
              setNavbar();
            });

            // Magnific pop up
            $('.tm-gallery').magnificPopup({
              delegate: 'a', // child items selector, by clicking on it popup will open
              type: 'image',
              gallery: {enabled:true}
              // other options
            });
         
        });
    
        </script>             

    </body>
    </html>